<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借书</title>

    <!--表格-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
        }

        .el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;

        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 40px;
        }





    </style>
</head>
<body>
<div id="app">

    <el-container>
        <el-header><div>欢迎你,${user.username}</div></el-header>
        <el-main>
            <!--搜索表单-->
            <el-form :inline="true" :model="borrow" class="demo-form-inline">
                <el-form-item label="类型">
                    <el-select v-model="borrow.category" placeholder="请选择类型">
                        <el-option label="计算机" value="计算机"></el-option>
                        <el-option label="文学" value="文学"></el-option>
                        <el-option label="武侠" value="武侠"></el-option>
                        <el-option label="少儿" value="少儿"></el-option>
                        <el-option label="教育" value="教育"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="书籍名称">
                    <el-input v-model="borrow.name" placeholder="书籍名称"></el-input>
                </el-form-item>

                <el-form-item label="价格">
                    <el-input v-model="borrow.price" placeholder="价格"></el-input>
                </el-form-item>

                <el-form-item label="数量">
                    <el-input v-model="borrow.pnum" placeholder="数量"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>

                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span><el-button type="danger" round @click="exit" icon="el-icon-s-home">退出系统</el-button></span>
            </el-form>

            <el-row>
                <el-button type="success" @click="checkMy"  round icon="el-icon-user-solid">我的信息</el-button>
                <el-button type="warning" @click = "push" round icon="el-icon-s-opportunity">还书</el-button>
                <el-button type="info" round @click="openFullScreen" icon="el-icon-refresh-left">刷新</el-button>
                <el-button type="success" round  @click="passwordDialog = true" icon="el-icon-edit">修改密码</el-button>
            </el-row><br>

            <%-- 我的信息--%>
            <el-drawer
                    title="我的信息"
                    :visible.sync="table"
                    direction="rtl"
                    size="50%">
                <el-table :data="gridData">
                    <el-table-column property="username" label="用户名" align="center"></el-table-column>
                    <el-table-column property="password" label="密码" align="center"></el-table-column>
                    <el-table-column property="number" label="电话号码" align="center"></el-table-column>
                    <el-table-column property="card" label="借书证" align="center"></el-table-column>
                </el-table>

                <%--借书历史记录--%>
                <template>
                    <el-table
                            :data="tableHistory"
                            height="550"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="名字"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="书名"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="borrowTime"
                                label="借书时间"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                label="还书时间"
                                align="center">
                        </el-table-column>
                    </el-table>
                </template>
            </el-drawer>


            <!--借书的对话框表单-->
            <el-dialog
                    title="借阅图书"
                    :visible.sync="showDialog"
                    width="30%">

                <el-form ref="form" :model="borrow" label-width="80px">
                    <el-form-item label="书籍名称">
                        <el-input v-model="borrow.name" disabled="disabled"></el-input>
                    </el-form-item>

                    <el-form-item label="价格">
                        <el-input v-model="borrow.price" disabled="disabled"></el-input>
                    </el-form-item>

                    <el-form-item label="数量">
                        <el-input v-model="borrow.pnum" disabled="disabled"></el-input>
                    </el-form-item>

                    <el-form-item label="书籍类型">
                        <el-select v-model="borrow.category" placeholder="请选择类型" disabled="disabled">
                            <el-option label="计算机" value="计算机"></el-option>
                            <el-option label="文学" value="文学"></el-option>
                            <el-option label="武侠" value="武侠"></el-option>
                            <el-option label="少儿" value="少儿"></el-option>
                            <el-option label="教育" value="教育"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="借阅人">
                        <el-input v-model="borrow.username"></el-input>
                    </el-form-item>

                    <el-form-item label="还书日期">
                        <el-date-picker
                                v-model="borrow.time"
                                type="date"
                                placeholder="还书日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updateBook">借阅</el-button>
                        <el-button @click="showDialog = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--修改密码的对话框表单-->
            <el-dialog
                    title="修改密码"
                    :visible.sync="passwordDialog"
                    width="30%">

                <el-form ref="form" :model="user" label-width="80px">
                    <el-form-item label="用户:">
                        <el-input v-model="user.username" disabled="disabled"></el-input>
                    </el-form-item>

                    <el-form-item label="新密码:">
                        <el-input v-model="user.password" ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="repass">修改</el-button>
                        <el-button @click="passwordDialog = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="index">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="书籍名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="pnum"
                            label="数量"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="category"
                            label="类型"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            align="center">
                        <template #default="scope">
                            <el-row>
                                <el-button type="primary" @click="sendId(scope.row)" icon="el-icon-reading">借阅</el-button>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页工具条-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </el-main>

        <el-footer>图书管理系统</el-footer>
    </el-container>




</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",

        mounted() {
            this.selectAll();

        },

        methods: {
            //------------修改密码----------
            repass(){
                console.log(this.user)
                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/user/repassword",
                    data: _this.user
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //修改成功
                        _this.$message({
                            message: '修改成功',
                            type: 'success'
                        });

                        //关闭窗口
                        _this.passwordDialog = false;

                        setTimeout(()=>{
                            //重新查询数据
                            location.reload();
                        },600);

                    }else {
                        _this.$message({
                            message: '修改失败',
                            type: 'lose'
                        });

                        //关闭窗口
                        _this.passwordDialog = false;

                        setTimeout(()=>{
                            //重新查询数据
                            location.reload();
                        },600);
                    }
                })
            },

            //---------------点击借阅发送id-----------
            sendId(row) {
                console.log(row.id);
                this.borrow.name =row.name
                this.borrow.price =row.price
                this.borrow.pnum =row.pnum
                this.borrow.category =row.category
                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/book/acceptId",
                    data: row.id,
                }).then(function (resp) {
                    if (resp.data == "success") {

                        _this.showDialog = true;
                        _this.$message({
                            message: '正在借书',
                            type: 'success'
                        });
                    }

                })
            },

            //----------------借阅图书-----------
            updateBook(){
                console.log(this.borrow)
                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/book/borrow",
                    data: _this.borrow
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //修改成功
                        _this.$message({
                            message: '借书成功',
                            type: 'success'
                        });

                        //关闭窗口
                        _this.showDialog = false;

                        setTimeout(()=>{
                            //重新查询数据
                            location.reload();
                        },600);

                    }else {
                        _this.$message({
                            message: '书本余量不足',
                            type: 'success'
                        });

                        //关闭窗口
                        _this.showDialog = false;

                        setTimeout(()=>{
                            //重新查询数据
                            location.reload();
                        },600);
                    }
                })
            },

            //----------------分页查询数据---------------
            selectAll() {

                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/book/selectByPageAndCondition?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: _this.borrow
                }).then(function (resp) {
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totalCount;
                })
            },

            //------------------表单查询方法-------------
            onSubmit() {
                this.selectAll();
            },



            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },


            //----------------每页的条目数发送变化----------------
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                //重新设置每页显示条数
                this.pageSize = val;
                this.selectAll();
            },

            //---------------页码发送变化查询的条数--------------
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                //重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            },

            //睡眠查找
            sleep(d){
                return new Promise((resolve => setTimeout(resolve,d)))
            },

            //跳转到还书页面
            push(){
                window.open('http://localhost:8080/bookstore/revertBook.jsp','_blank')
            },

            //刷新
            openFullScreen() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                    location.reload();
                }, 1000);
            },

            //退出系统
            exit(){
                window.open('http://localhost:8080/bookstore/login.jsp','_blank')
            },

            checkMy(){
                this.table = true;

                var _this = this;

                axios({
                    method: "get",
                    url: "http://localhost:8080/bookstore/user/checkmy",
                }).then(function (resp) {
                    _this.tableHistory = resp.data;
                })
            }
        },

        data() {
            return {
                //抽屉表格
                table: false,
                dialog: false,
                loading: false,
                gridData: [{
                    username: '${user.username}',
                    password: '${user.password}',
                    number: '${user.number}',
                    card: '${user.card}'
                }],


                drawer: false,

                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },


                //每页显示的条数
                pageSize: 5,

                //总记录数
                totalCount: 100,

                //分页工具条的当前页码
                currentPage: 1,

                //对话框是否展示的标记
                dialogVisible: false,

                showDialog: false,

                passwordDialog:false,

                //书籍的数据
                borrow: {
                    name: '',
                    price: '',
                    pnum: '',
                    category: '',
                    username:'${user.username}',
                    time: '',
                },

                //密码
                user: {
                    id:'${user.id}',
                    username: '${user.username}',
                    password: '',
                    number: '${user.number}',
                    card: '${user.card}'
                },


                //表格数据
                tableData: [{
                    name: 'java编程思想',
                    price: '98',
                    pnum: '100',
                    category: '计算机',
                }, {
                    name: 'java编程思想',
                    price: '98',
                    pnum: '100',
                    category: '计算机',
                }, {
                    name: 'java编程思想',
                    price: '98',
                    pnum: '100',
                    category: '计算机',
                }, {
                    name: 'java编程思想',
                    price: '98',
                    pnum: '100',
                    category: '计算机',
                }],

                //借书历史记录
                tableHistory: [{
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }, {
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }, {
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }, {
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }, {
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }, {
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }, {
                    username: '',
                    name: '王小虎',
                    borrowTime: '上海市普陀区金沙江路 1518 弄',
                    time:'2022-5-10',
                    overtime:'是'
                }]
            }
        }
    })


</script>

</body>
</html>